<template>
  	<div class="login_page">
	  	<transition name="form-fade" mode="in-out">
	  		<section class="form_contianer" v-show="regForm">
		  		<div class="manage_tip">
		  			<span class="title">后台管理系统忘记密码</span>
		  		</div>
		    	<el-form :model="regForm" :rules="rules" ref="regForm" class="loginForm">
					<el-form-item prop="mobilePhone">
					    <span class="fa-tips"><i class="fa fa-telegram"></i></span>
						<el-input class="area" type="text" placeholder="手机号码" v-model="regForm.mobilePhone" ></el-input>
					</el-form-item>
					<el-form-item prop="photoCheckCode">
						<span class="fa-tips"><i class="fa fa-snapchat-ghost"></i></span>
						<el-input class="area" type="text" style="width:120px; float: left;" placeholder="图片验证码" v-model="photoCheckCode"></el-input>
						<div class="photocheckcode"  id="photocheckcode" style="width:120px; float: left;margin-left:5px;" title="点击刷新" v-on:click="getPhotoCode"></div>
						<el-button class="btn" type="primary" style="width:120px; float: left;margin-left:5px;"   @click="sendMobileCode('regForm')">发送验证码</el-button>
					</el-form-item>
					<el-form-item prop="messageCheckCode">
						<span class="fa-tips"><i class="fa fa-list-alt"></i></span>
						<el-input class="area" type="password" placeholder="短信验证码" v-model="regForm.messageCheckCode"></el-input>
					</el-form-item>
					<el-form-item prop="password">
					    <span class="fa-tips"><i class="fa fa-lock"></i></span>
						<el-input class="area" type="password" placeholder="密码" v-model="regForm.password"></el-input>
					</el-form-item>
					<el-form-item>
				    	<el-button type="primary"  @click="doRegister('regForm')" class="submit_btn">注册</el-button>
				  	</el-form-item>
					<div class="tiparea">
						<div class="wxtip" style="float:left;padding-left:20px;padding-bottom:20px;">
							<router-link :to="{ path: '/login'}">
								登录
							</router-link>
						</div>
						<div class="wxtip" style="float:left;padding-left:20px;padding-bottom:20px;">
							<router-link :to="{ path: '/register'}">
								注册
							</router-link>
						</div>
					</div>
				</el-form>

	  		</section>
	  	</transition>
  	</div>
</template>

<script>
    import {axios} from 'utils/'
	import * as mUtils from 'utils/mUtils'
	import { baseUrl } from 'utils/'
	import {mapActions, mapState,mapGetters} from 'vuex'

	export default {
	    data(){
			return {
                regForm: {
					password: '',
                    messageCheckCode: '',
                    mobilePhone: '',
                    captcha:''
				},
				tokenImg: '',
                tokenAccess: '',
				rules: {
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' }
					],
                    mobilePhone: [
                        { required: true, message: '请输入电话号码', trigger: 'blur' },
                        { min: 11, max: 11, message: '长度在 11 个数字', trigger: 'blur' }
                    ],
                    messageCheckCode: [
                        { required: true, message: '请输入短信验证码', trigger: 'blur' },
                        { min: 4, max: 4, message: '长度在 4 个字符', trigger: 'blur' }
                    ],
				},
                // regForm: false,
				ip: '',
                photoCheckCode: ''
			}
		},
		mounted(){
			this.getPhotoCode()
		},
		computed: {
			...mapGetters(['menuitems','isLoadRoutes'])
		},
		methods: {
			...mapActions(['addMenu','loadRoutes']),
			showMessage(type,message){
                this.$message({
                    type: type,
                    message: message
                });
            },
			sendMobileCode(){
                const mobileSendMsgUrl = 'http://59.110.70.252:8031/captcha/pushCaptcha'
                const data_captcha = this.photoCheckCode
                const data_mobile = this.regForm.mobilePhone
				if(data_captcha==''){
                    this.$message.error('验证码不能为空')
					return false
				}
				if(data_mobile==''){
                    this.$message.error('电话号码不能为空')
                    return false
				}
                axios({
                    type:'post',
                    path:mobileSendMsgUrl,
                    tokenFlag: false,
                    data:"captcha="+data_captcha+"&mobilePhone="+data_mobile,
                    fn:data=>{
                        if(data.success === true){
                            this.$message({
                                type: 'success',
                                message: '验证码已经发送到手机上，请查看。'
                            });
                        }else{
                            this.$message.error('获取验证码失败')
                        }
                    },
                    headers:{
                        'x-captcha-token':this.tokenImg
            		}
                })
			},
			getPhotoCode(){
			    const photoCheckCodeUrl = 'http://59.110.70.252:8031/captcha/captchaImage'
                axios({
                    type:'get',
                    path:photoCheckCodeUrl,
                    data:{},
                    tokenFlag: true,
                    fn:data=>{
                        if(data.success === true){
                            const check_img = '<img style="width:120px;heigth:40px; " src="data:image/png;base64,'+ data.data.img+'"/>'
							this.tokenImg = data.data.token
                            if(data.data.test){
                                this.photoCheckCode = data.data.test
                            }
                            document.getElementById("photocheckcode").innerHTML = check_img
                        }else{
                            this.$message.error('获取验证码失败')
                        }
                    }
                })
			},
			//保存用户信息到缓存
			saveUserInfo(){
				const userinfo = {
					username:this.regForm.name
				}
				mUtils.setStore('userinfo',userinfo)
			},
			//模拟动态生成菜单并定位到index
			generateMenuPushIndex(){
				const menuData = [
					{path:'/index',name:'首页',component:'index',icon:'fa-server',noDropdown:true,
						children:[
							{path:'/index',name:'首页',component:'index'},
						]
					},
					{path:'/userList',name:'用户列表',component:'userList',icon:'fa-user',noDropdown:true,
						children:[
							{path:'/userList',name:'用户列表',component:'userList'},
						]
					},
					{path:'/infoList',name:'信息列表',component:'infoList',icon:'fa-envelope',noDropdown:true,
						children:[
							{path:'/infoList',name:'信息列表',component:'infoList'},
						]
					},
					{path:'/infoManage',name:'信息管理',component:'content',icon:'fa-asterisk',
						children:[
							{path:'/infoShow',name:'个人信息',component:'infoShow'},
							{path:'/infoModify',name:'修改信息',component:'infoModify'}
						]
					},
					{path:'/fundArticle',name:'文章',component:'content',icon:'fa-file-text-o',
						children:[
							{path:'/createFundArticle',name:'发布文章',component:'createFundArticle'},
							{path:'/modifyFundArticle',name:'编辑文章',component:'modifyFundArticle'},
							{path:'/showFundArticle',name:'查看文章',component:'showFundArticle'}
						]
			        },
				]

				mUtils.setStore('menuData',menuData)     // 将菜单放入缓存。
				this.addMenu(menuData)     			  // 生成菜单,将菜单放入store 。
				console.log(!this.isLoadRoutes)
				if (!this.isLoadRoutes) {  // 首次进来为false,改变其状态为true
					const routes = mUtils.generateRoutesFromMenu(menuData) //根据菜单生成的路由信息,需要将数据库返回的对象key值转成小写
					console.log(routes)
					const asyncRouterMap = [
						{
							path:'/404',
							name:'404',
							hidden:true,
							component:require('page/404.vue')
						},
						{
							path: '/index',
							name:'',
							hidden   : true,
							component: require('layout/home.vue'),
							redirect: '/index',
							children:routes
						}
					]
					console.log(asyncRouterMap)
					this.$router.addRoutes(asyncRouterMap);
					this.loadRoutes()   // true,第二次进来不用再去加载路由
				}

				this.$router.push('/index')
				this.showMessage('success','登录成功');
			},
		    submitForm(regForm) {

			},
			doRegister(regForm){
                this.$refs[regForm].validate((valid) => {
                    if (valid) {
                        //用户注册的接口
                        let userinfo = this.regForm;
                        let data = {
                            ip:'127.0.0.1'
                        }
                        userinfo.captcha = userinfo.messageCheckCode
                        let userData = Object.assign(userinfo, data);
                        axios({
                            type:'get',
                            path:'http://59.110.70.252:8031/account/resetPassword?mobilePhone=133&captcha=123&password=1',
                            data:userData,
                            tokenFlag: true,
                            fn:data=>{
                                console.log(data);
                                if(data.success == true){
                                    //this.saveUserInfo() // 存入缓存，用于显示用户名
                                    //this.generateMenuPushIndex() //模拟动态生成菜单并定位到index
                                    this.$store.dispatch('initLeftMenu'); //设置左边菜单始终为展开状态

                                }else{
                                    this.$message.error('修改密码失败请重试')
                                }

                            },
                            headers:{
                                'x-captcha-token':this.tokenImg
                            }
                        })
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '请输入正确的用户名密码',
                            offset: 100
                        });
                        return false;
                    }
                });
			},
			getip(){
            },
		},
		watch: {
			adminInfo: function (newValue){
				if (newValue.id) {
					this.$message({
                        type: 'success',
                        message: '检测到您之前登录过，将自动登录'
                    });
					this.$router.push('index')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.login_page{
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(../assets/img/bg9.jpg) no-repeat center center;
		background-size: 100% 100%;
	}
	.loginForm{
		 background-color: #fff;
		 padding:20px;
		 border-radius:3px;
		 box-shadow: 5px 5px 10px #01144c;
		.fa-tips{
			position: absolute;
			top: 0px;
			left: 10px;
			z-index: 20;
			color:#FF7C1A;
			font-size: 18px;
		}

	}
	.manage_tip{
		margin-bottom:20px;
		.title{
			font-family: cursive;
			font-weight: bold;
			font-size: 26px;
			color:#fff;
		}
		.logo{
			width:60px;
			height:60px;
		}
	}
	.form_contianer{
		width:420px;
		height:210px;
		position: absolute;
		top: 20%;
        left: 34%;
		padding: 25px;
		border-radius: 5px;
		text-align: center;
		.submit_btn{
			width: 100%;
			font-size: 16px;
			letter-spacing:20px;
		}
	}
	.tiparea{
		text-align:left;height: 30px;
		font-size: 12px;
		color: #4cbb15;
		.tip{
			margin-left: 54px;
		}
	}

	.form-fade-enter-active, .form-fade-leave-active {
	  	transition: all 1s;
	}
	.form-fade-enter, .form-fade-leave-active {
	  	transform: translate3d(0, -50px, 0);
	  	opacity: 0;
	}
	.loginForm{
		.el-button--primary{
			background-color:#FF7C1A;
			border:1px solid #FF7C1A;
		}
	}
</style>
